import React, { useState, useEffect } from 'react'
import './style/DateSelector.css'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import Header from './Header'
import { h0 } from './fp'

function Day(props) {
	const { day, onSelect } = props
	if (!day) {
		return <td className='null'></td>
	}
	const classes = []
	const now = h0()
	// 已过期类名
	if (day < now) {
		classes.push('disabled')
	}
	// 周六周日类名
	if ([6, 0].includes(new Date(day).getDay())) {
		classes.push('weekend')
	}
	const dateString = now === day ? '今天' : new Date(day).getDate()
	return (
		<td className={classNames(classes)} onClick={() => onSelect(day)}>
			{dateString}
		</td>
	)
}
Day.propTypes = {
	day: PropTypes.number,
	onSelect: PropTypes.func.isRequired,
}
function Week(props) {
	const { days, onSelect } = props
	return (
		<tr className='date-table-days'>
			{days.map((day, idx) => {
				return <Day key={idx} day={day} onSelect={onSelect} />
			})}
		</tr>
	)
}
Week.propTypes = {
	days: PropTypes.array.isRequired,
	onSelect: PropTypes.func.isRequired,
}
function Month(props) {
	const { startingTimeInMonth, onSelect } = props
	const startDay = new Date(startingTimeInMonth)
	const currentDay = new Date(startingTimeInMonth)
	// 遍历获取当前月的日数据
	let days = []
	while (currentDay.getMonth() === startDay.getMonth()) {
		days.push(currentDay.getTime())
		currentDay.setDate(currentDay.getDate() + 1)
	}

	days = new Array(startDay.getDay() ? startDay.getDay() - 1 : 6).fill(null).concat(days)
	const lastDay = new Date(days[days.length - 1])
	days = days.concat(new Array(lastDay.getDay() ? 7 - lastDay.getDay() : 0).fill(null))
	const weeks = []
	for (let row = 0; row < days.length / 7; ++row) {
		const week = days.slice(row * 7, (row + 1) * 7)
		weeks.push(week)
	}
	return (
		<table className='date-table'>
			<thead>
				<tr>
					<td colSpan='7'>
						<h5>
							{startDay.getFullYear()}年{startDay.getMonth() + 1}月
						</h5>
					</td>
				</tr>
			</thead>
			<tbody>
				<tr className='date-table-weeks'>
					<th>周一</th>
					<th>周二</th>
					<th>周三</th>
					<th>周四</th>
					<th>周五</th>
					<th className='weekend'>周六</th>
					<th className='weekend'>周日</th>
				</tr>
				{weeks.map((week, idx) => {
					return <Week key={idx} days={week} onSelect={onSelect} />
				})}
			</tbody>
		</table>
	)
}

Month.propTypes = {
	startingTimeInMonth: PropTypes.number.isRequired,
	onSelect: PropTypes.func.isRequired,
}

const DateSelector = props => {
	const { show, onBack, onSelect } = props
	const now = new Date()
	now.setHours(0)
	now.setMinutes(0)
	now.setSeconds(0)
	now.setMilliseconds(0)
	now.setDate(1)
	const monthSequence = [now.getTime()]
	now.setMonth(now.getMonth() + 1)
	monthSequence.push(now.getTime())
	now.setMonth(now.getMonth() + 1)
	monthSequence.push(now.getTime())

	return (
		<div className={classNames('dete-selector', { hidden: !show })}>
			<Header title='选择日期' onBack={onBack} />
			<div className='date-selector-tables'>
				{monthSequence.map(month => {
					return <Month key={month} startingTimeInMonth={month} onSelect={onSelect} />
				})}
			</div>
		</div>
	)
}

DateSelector.propTypes = {
	show: PropTypes.bool.isRequired,
	onBack: PropTypes.func.isRequired,
	onSelect: PropTypes.func.isRequired,
}
export default DateSelector
